<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>
    <script></script>
    <script type="module">

        import * as THREE from './three.js';

        let camera, scene, renderer;
        let mesh;

        init();
        animate();


        function init() {

            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 400;

            scene = new THREE.Scene();

            const texture = new THREE.TextureLoader().load('./crate.gif');

            const geometry = new THREE.BoxGeometry(200, 200, 200);
            const material = new THREE.MeshBasicMaterial({ map: texture });

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            //

            window.addEventListener('resize', onWindowResize);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>